<!--选择树形风格-->
<template>
    <div :key="refreshKey">
        <a-radio-group name="radioGroup" v-model="treeStyle.type">
            <a-radio value="system">{{i18n('system','系统预设')}}</a-radio>
            <a-radio value="custom">{{i18n('custom','自定义')}}</a-radio>
            <a-radio value="noIcon">{{i18n('noIcon','无图标')}}</a-radio>
        </a-radio-group>
        <div class="tree-select" v-if="treeStyle.type === 'system'">
            <template v-for="item of styles">
                <div class="tree-select-item" :class="{'tree-select-active':item.value === treeStyle.style}" :key="item.value" @click="treeClick(item.value)">
                    <img :src="item.url" alt="">
                </div>
            </template>
        </div>
        <div class="tree-select-icon" v-if="treeStyle.type === 'custom'">
            <table>
                <thead>
                    <tr><th>{{i18n('treeNode','树节点')}}</th><th>{{i18n('icon','图标')}}</th><th>{{i18n('iconColor','图标颜色')}}</th></tr>
                </thead>
                <tbody>
                    <template v-for="node of icons">
                        <tr>
                            <td>{{node.label}}</td>
                            <td><RxSelectIcon v-model="treeStyle[node.value].icon" :baseUrl="baseUrl" style="vertical-align: -2px;"/></td>
                            <td><input v-model="treeStyle[node.value].color" type="color" style="vertical-align: -2px;"></td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script>
import style1 from './img/style1.png';
import style2 from './img/style2.png';
import style3 from './img/style3.png';
import { RxSelectIcon } from "@lowcode/jpaas-common-lib"
export default {
    name: "TreeStyleSelect",
    components:{
        RxSelectIcon
    },
    props:{
        value:{},
    },
    data(){
        return {
            refreshKey:'k',
            treeStyle:{
                type:'system',
                style:'style2',
                expand:{ icon:'', color:'#000000' },
                collapse:{ icon:'', color:'#000000' },
                leaf:{ icon:'', color:'#000000' },
            },
            icons:[
                {value:'expand',label:this.i18n('parentNode','父节点（展开）')},
                {value:'collapse',label:this.i18n('parentNodeFold','父节点（折叠）')},
                {value:'leaf',label:this.i18n('subNode','子节点')},
            ],
            styles:[
                {value:'style2',url:style2},
                {value:'style1',url:style1},
                {value:'style3',url:style3}
            ],
            baseUrl:''
        }
    },
    created(){
        this.baseUrl = process.env.VUE_APP_ADMIN_FRONT ;
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoListDialog.form", key);
        },
        treeClick(value){
            this.$set(this.treeStyle,'style',value)
        },
        setKeyValue(obj,cur){
            if(typeof obj === "string"){return}
            for (let key in obj){
                let val = obj[key]
                if(val && typeof val === 'string'){
                    this.$set(cur,key,val)
                }else if(Object.prototype.toString.call(val) === '[object Object]'){
                    this.setKeyValue(val,cur[key])
                }
            }
        }
    },
    watch:{
        value:{
            handler(v) {
                if(v){
                    this.setKeyValue(v,this.treeStyle)
                }
            },
            deep: true,
            immediate:true
        },
        treeStyle:{
            handler(v){
                this.$emit('input',v)
            },
            deep:true
        }
    }
}
</script>
<style scoped>
.tree-select-icon table{
    table-layout: fixed;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
}
.tree-select-icon table th{
    background-color: #fafafa;
}
.tree-select-icon table th:last-child{
    border-top-right-radius: 6px;
}
.tree-select-icon table th:first-child{
    border-top-left-radius: 6px;
}
.tree-select-icon table th,
.tree-select-icon table td{
    padding:0 6px;
}
.tree-select-icon table th:not(:last-child),
.tree-select-icon table td:not(:last-child){
    border-right: 1px solid #d9d9d9;
}
.tree-select-icon table tr th,
.tree-select-icon table tr:not(:last-child) td{
    border-bottom: 1px solid #d9d9d9;
}
.tree-select-icon{

    width: fit-content;
}

.tree-select{
    display: flex;
}
.tree-select-item{
    max-width: 200px;
    width: 100%;
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    position: relative;
}
.tree-select-item:not(:first-child){
    margin-left: 10px;
}
.tree-select-item.tree-select-active{
    border-color: #4285f4;
}
.tree-select-item.tree-select-active:before{
    content: '';
    display: inline-block;
    height: 0;
    width: 0;
    border-left:12px solid transparent ;
    border-bottom: 12px solid transparent;
    border-top: 12px solid #4285f4;
    border-right: 12px solid #4285f4;
    position: absolute;
    right: 0;
    top: 0;
    border-top-right-radius: 6px;
}
.tree-select-item.tree-select-active:after{
    content: '';
    position: absolute;
    right: 5px;
    top: 2px;
    height: 8px;
    width: 5px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}
</style>